<template>
  <div class="app">
    <van-nav-bar title="购物车">
      <template #right>
        <van-icon name="search" size="18" />
      </template>
    </van-nav-bar>
    <!-- 如果已登录购物车 -->
    <div v-if="isLogin">
      <van-checkbox-group v-model="result" ref="checkboxGroup">
        <van-swipe-cell v-for="(item, index) in cartList" :key="index">
          <van-checkbox :name="index"   @click="Sum">
            <van-card
              :price="item.price"
              :title="item.goodsname"
              class="goods-card"
              :thumb="$host + item.img"
            
            >
              <template #footer>
                <van-stepper
                  v-model="item.num"
                  @plus="edit(item.id, 2)"
                  @minus="edit(item.id, 1)"
                  theme="round"
                  button-size="22"
                  disable-input
                />
              </template>
            </van-card>
          </van-checkbox>
          <template #right>
            <van-button
              square
              text="删除"
              @click="del(item.id)"
              type="danger"
              class="delete-button"
            />
          </template>
        </van-swipe-cell>
      </van-checkbox-group>

      <van-submit-bar
        style="bottom: 50px"
        :price="this.sum"
        button-text="提交订单"
        @submit="onSubmit"
        v-if="isLogin"
      >
        <van-checkbox v-if="isLogin" @click="checkAll" v-model="checked"
          >全选</van-checkbox
        >
      </van-submit-bar>
    </div>
    <!-- 如果未登录购物车 -->
    <div v-else>
      <van-button to="/login" style="width: 100%" type="primary"
        >请登录</van-button
      >
    </div>

    <van-tabbar v-model="active">
      <van-tabbar-item to="/" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item to="/cate" icon="search">分类</van-tabbar-item>
      <van-tabbar-item to="/shopcar" icon="friends-o">购物车</van-tabbar-item>
      <van-tabbar-item to="/loginno" icon="setting-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>
<script>
import Vue from "vue";
import { SubmitBar } from "vant";
import { getShopcar } from "../../request";
Vue.use(SubmitBar);

export default {
  created() {
    if (localStorage.userInfo != undefined) {
      this.isLogin = true;
      this.uid = JSON.parse(localStorage.userInfo).uid;
      console.log(this.uid);
      // 请求购物车数据
      this.getCart();
    }
  },
  computed: {},
  mounted() {},
  updated() {
    if (this.result.length == this.cartList.length) {
      this.checked = true;
    } else {
      this.checked = false;
    }
  },
  data() {
    return {
      active: 2,
      checked: false,
      value: "",
      isLogin: false,
      uid: "",
      cartList: [],
      num: "",
      id: "",
      result: [],
      sum: 0,
    };
  },
  methods: {
    Sum() {
      this.sum = 0;
      this.result.forEach((item) => {
 
        this.sum +=
          Number(this.cartList[item].num) *
          Number(this.cartList[item].price) *
          100;
      });


      return this.sum;
    },
    onSubmit() {},
    async getCart() {
      let res = await getShopcar({ params: { uid: this.uid } })
        .then((res) => {
          this.cartList = res.data.list;
          console.log(this.cartList.goodsid);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    // position 为关闭时点击的位置
    // instance 为对应的 SwipeCell 实例
    edit(id, type) {
      this.$http.post("/cartedit", { id, type }).then((res) => {
        console.log(res);
      });
    },
    del(id) {
      this.$http.post("/cartdelete", { id }).then((res) => {
        console.log(res);
      });
    },
    // 全选
    checkAll() {
      if (this.checked == false) {
        this.checked = true;
        this.$refs.checkboxGroup.toggleAll(true);
      } else {
        this.$refs.checkboxGroup.toggleAll();
      }
    },
  },
};
</script>


<style>
.goods-card {
  margin: 0;
  background-color: white;
}

.delete-button {
  height: 100%;
}
.van-stepper {
  margin-left: 230px;
  position: relative;
  bottom: 21px;
}
</style>
<style >
</style>